<template>
	<div class="alarmConfiguration">
		<div class="list-layout mt16">
			<div class="btns clear">
				<span class="title">{{ $t('common.listInformation') }}</span>
			</div>
			<div class="tableContent">
				<Table
					class="resizable-table"
					border
					@on-column-width-resize="onColumnWidthResize"
					:columns="columns"
					ellipsis
					ref="selection"
					stripe
					:data="dataArr"
				>
				</Table>
			</div>
			<div class="pageWrap mt16">
				<pageLeftTitle :total="total" />
				<Page
					:total="total"
					:page-size="pageSize"
					:page-size-opts="pageSizeOption"
					:current="pageNum"
					@on-change="changePageNum"
					@on-page-size-change="changePageSize"
					show-sizer
					show-total
				/>
			</div>
		</div>
	</div>
</template>

<script>
import toggleTableOperation from '@/mixins/toggleTableOperation';
export default {
	name: 'commonTable',
	mixins: [toggleTableOperation],
	props: {
		columns: {
			type: Array,
			default: () => [],
		},
		postUrl: {
			type: String,
			default: '',
		},
		searchParams: {
			type: Object,
			default: () => {},
		},
		params: {
			type: Object,
			default: () => {},
		},
	},
	watch: {
		postUrl: {
			handler() {
				this.reset();
				this.changeNum();
			},
		},
		columns: {
			handler() {
				// this.searchList()
			},
		},
	},
	data() {
		return {
			pageNum: 1,
			pageSize: 10,
			total: 0,

			dataArr: [],
			pageSizeOption: [10, 20, 30, 40],
		};
	},
	mounted() {
		this.searchList();
	},
	methods: {
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},

		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		//查询列表
		searchList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.searchParams,
				...this.params,
			};
			this.getTableColumnsWidth(this.columns || []);
			this.axios({
				method: 'get',
				url: this.postUrl,
				params: params,
			}).then((res) => {
				if (res.code === 200) {
					this.dataArr = res.data.records;
					this.total = res.data.total;
				} else {
					// this.$Message.warning({
					//   content: res.msg,
					//   duration: 6,
					//   closable: true,
					// });
				}
			});
		},
		reset() {
			this.$set(this, 'dataArr', []);
			this.$set(this, 'total', 0);
			this.pageNum = 1;
		},
	},
};
</script>
